<template>
    <!-- 用户展示：
            头像和用户名垂直排列。
            每行多个用户水平排列。
            每个用户行最后有一个邀请按钮。
        交互功能：
            点击邀请按钮时触发一个事件。
            鼠标悬浮在头像上时显示一个删除图标，点击后触发删除事件。 -->
    <div class="role-cards">
        <el-card v-for="role in roles" :key="role.roleId" class="role-card" shadow="hover">
            <div class="role-header">
                <h3>{{ role.roleName }}</h3>
            </div>
            <div class="users-list">
                <div v-for="user in role.users" :key="user.userId" class="user-card">
                    <div class="avatar-wrapper">
                        <el-avatar :src="user.avatar" size="large" class="user-avatar">
                            <!-- 如果头像加载失败，可以使用用户名的首字母作为备用 -->
                            <img :src="user.avatar" alt="avatar" @error="handleAvatarError($event, user)" />
                            <span v-if="!user.avatar">{{ user.username?.charAt(0).toUpperCase() }}</span>
                        </el-avatar>
                        <el-icon class="delete-icon" @click.stop="handleDeleteUser(role.roleId!, user.userId!)">
                            <Delete />
                        </el-icon>
                    </div>
                    <span class="username">{{ user.username }}</span>
                    <el-button type="primary" plain icon="el-icon-plus" @click="handleInviteUser(role!,user!)">
                        邀请
                    </el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import type { User } from '../../type/User';
import type { Role } from '../../type/Role';
import {
    ElCard,
    ElAvatar,
    ElButton,
    ElIcon,
    
} from 'element-plus';
import { Delete } from '@element-plus/icons-vue';


// 定义组件的 props
const props = defineProps<{
    roles: Role[];
}>();

// 定义组件的 emits
const emit = defineEmits<{
    (e: 'invite-user', payload: { role: Role;user:User }): void;
    (e: 'delete-user', payload: { roleId: string; userId: string }): void;
}>();

/**
 * 处理邀请用户事件
 * @param roleId 角色ID
 * 
 */
const handleInviteUser = (role: Role,user:User) => {
    emit('invite-user', { role,user });

};

/**
 * 处理删除用户事件
 * @param roleId 角色ID
 * @param userId 用户ID
 */
const handleDeleteUser = (roleId: string, userId: string) => {
    emit('delete-user', { roleId, userId });
    
};

/**
 * 处理头像加载错误，显示首字母
 * @param event 图片加载错误事件
 * @param user 当前用户
 */
const handleAvatarError = (event: Event, user: User) => {
    const imgElement = event.target as HTMLImageElement;
    imgElement.style.display = 'none';
};
</script>

<style lang="scss" scoped>
.role-cards {
    display: flex;
    flex-direction: column;
    gap: 10px; // 间距


    width: 100%;
}

.role-card {
    border-radius: 8px;

    width: 100%;
    width: 400px;
}

.role-header {
    margin-bottom: 10px;
    text-align: center;
}

.users-list {
    display: flex;
    
    gap: 10px;

    align-items: center;
}

.user-card {
    display: flex;
  
    flex-direction: column;
    align-items: center;
    position: relative;
    background-color: #fff;
}

.avatar-wrapper {
    position: relative;
    margin-bottom: 10px;
}

.user-avatar {
    cursor: pointer;
}

.delete-icon {
    position: absolute;
    top: -5px;
    right: -5px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 2px;
    color: red;
    cursor: pointer;
    display: none;
    font-size: 14px;
}

.avatar-wrapper:hover .delete-icon {
    display: block;
}

.username {
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
    word-break: break-all;
}

.el-button {
    width: 65px;
    text-align: center;
}
</style>